<template>
    <div class="wrap">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>评价列表</span>
                </div>
            </template>
            <dl class="filter">
                <dt>客户名称：</dt>
                <dd><el-input v-model="params.name" style="width: 180px" placeholder="请输入用户姓名" /></dd>
                <dt>群主名称：</dt>
                <dd><el-input v-model="params.owner_name" style="width: 180px" placeholder="请输入群主名称" /></dd>
                <dt>邀评 / 评价法务：</dt>
                <dd><el-input v-model="params.creator_name" style="width: 180px" placeholder="请输入邀评法务" /></dd>
                <dt>时间选择：</dt>
                <dd><el-date-picker v-model="during" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="getDate" /></dd>
                <dd><el-button type="primary" style="margin-left: 20px;" @click="handleSearch">查询</el-button>
                    <el-button @click="handleClear">重置</el-button>
                </dd>
            </dl>
            <el-table :data="tableData" style="width: 100%; height: calc(100vh - 279px);" border>
                <el-table-column prop="name" label="客户名称" width="180" />
                <el-table-column prop="content" label="评价内容" width="180" />
                <el-table-column prop="creator_name" label="评价法务" />
                <el-table-column prop="owner_name" label="群主名称" />
                <el-table-column label="服务星级">
                    <template #default="{ row }">
                        <el-rate v-model="row.servernum" disabled v-if="row.status == 1" />
                    </template>
                </el-table-column>
                <el-table-column label="响应星级">
                    <template #default="{ row }">
                        <el-rate v-model="row.responsenum" disabled v-if="row.status == 1" />
                    </template>
                </el-table-column>
                <el-table-column label="专业星级">
                    <template #default="{ row }">
                        <el-rate v-model="row.majornum" disabled v-if="row.status == 1" />
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" width="180" />
            </el-table>
            <div class="pagination">
                <el-pagination v-model:current-page="params.page" layout="total, prev, pager, next" :total="total"
                    :page-size="15" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, watchEffect,watch } from '../TUIKit/adapter-vue';
import { GetEvaluateList } from '@/api';
const props = defineProps({
    type: {
        type: String,
        default: '',
    }
});
const params = ref<any>({
    name: '',
    owner_name: '',
    creator_name: '',
    start_time: '',
    end_time: '',
    page: 1
});
const during = ref([]);
const tableData = ref([]);
const total = ref(0);
const currentNavBar = ref('')

watchEffect(() => {
    currentNavBar.value = props.type;
})

watch(currentNavBar, () => {
    if (currentNavBar.value == 'evaluate') {
        getList();
    }
})

function getDate() {
    params.value.start_time = during.value[0]
    params.value.end_time = during.value[1]
}

function getList() {
    GetEvaluateList(params.value).then(res => {
        tableData.value = res.data
        total.value = res.count
    })
}

function handleClear() {
    params.value.name = ''
    params.value.owner_name = ''
    params.value.creator_name = ''
    params.value.start_time = ''
    params.value.end_time = ''
    params.value.page = 1
    during.value = []
    tableData.value = []
    getList()
}

function handleCurrentChange(val: number) {
    params.value.page = val
    getList()
}

function handleSearch() {
    params.value.page = 1
    tableData.value = []
    getList()
}
</script>
<style lang="scss" scoped>
    .wrap{
        padding: 20px;
        width: 100%;

        .card-header{

            span{
                font-size: 16px;
            }
        }

        .filter{
            display: flex;
            align-items: center;
            margin-bottom: 30px;

            dt{
                font-size: 16px;
            }

            dd{
                margin-right: 30px;
            }
        }

        .pagination{
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
    }
</style>